<template>
    <div class="admin">
      <table-pro :columns="columns" :requestApi="getAdminList">
        <template #role="{ row }">
          {{ row.roles?.[0]?.name ?? '暂无' }}
        </template>
        <template #status="{ row }">
          <!-- {{ row.status ? '启用' : '禁用' }} -->
          <el-switch
            :modelValue="row.status"
            size="small"
            active-text="启用"
            inactive-text="禁用"
          />
        </template>
        <template #createdAt="{ row }">
          {{ dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template #action="{ row }">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </table-pro>
    </div>
  </template>
  
  <script setup lang="ts">
  // import {} from 'vue'
  import dayjs from 'dayjs'
  import { getAdminList } from '@/api/admin'
  
  // 定义管理员页面中表格列的数据
  const columns: ITableColumn[] = [
    { prop: 'username', label: '用户名', fixed: true },
    { prop: 'nickname', label: '昵称' },
    { prop: 'phone', label: '手机号' },
    { prop: 'role', label: '角色', type: 'slot' },
    { prop: 'status', label: '状态', type: 'slot' },
    { prop: 'createdAt', label: '创建时间', type: 'slot', width: '240px' },
    { prop: 'action', label: '操作', type: 'slot', fixed: 'right' },
  ]
  </script>
  
  <style lang="less" scoped>
  
  </style>
  